.view-container {
  width: 100%;
  height: 100%;
}


.body {
  background: #F3F6FF;
}

.wrapper {
  width: 750px;
  padding-top: 286px;
  background: url('https://oss.cloudcpc.com/e4d8e20987fd3f9aafa8bdecf0a43cf5.png') no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
}

.Logo-Title {
  text-align: center;
  font-size: 42px;
  font-weight: 500;
  color: #FFFFFF;
  line-height: 43px;
  margin-bottom: 32px;
}

.Logo-sub {
  margin-bottom: 100px;
  text-align: center;
  width: 750px;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 48px;

}

.wrapper-white {
  position: relative;
  margin-top: -35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  border-radius: 40px 40px 0px 0px;
  padding: 65px 0px 45px 0px;
  overflow: hidden;
}

.top-Title {
  margin-bottom: 134px;
  font-size: 36px;
  color: #18202D;
  line-height: 34px;
}

.top-sub {
  margin-bottom: 60px;
  width: 642px;
  font-size: 28px;
  color: #888888;
  line-height: 48px;
}

.top-image {
  position: relative;
  margin-bottom: 68px;
  width: 743px;
  height: 740px;
  transform: scale(0.8);
  opacity: 0.8;
  -webkit-animation-name: scaleDraw;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 5s;
  /*动画所花费的时间*/
  overflow: hidden;
}

@keyframes scaleDraw {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0.8);
    /*开始为原始大小*/
    opacity: 0.8;
  }

  25% {
    transform: scale(1);
    /*放大1.1倍*/
    opacity: 1;
  }

  50% {
    transform: scale(0.8);
    opacity: 0.8;
  }

  75% {
    transform: scale(1);
    opacity: 1;
  }

  100% {
    transform: scale(0.8);
    opacity: 0.8;
  }
}

.top-image-1 {
  position: absolute;
  top: 168px;
  left: 13px;
  width: 724px;
  height: 210px;
}

.top-image-2 {
  position: absolute;
  top: 753px;
  left: 87px;
  width: 576px;
  height: 205px;
}

.tab-line {
  width: 750px;
  background: #F3F6FF;
  height: 10px;
}

.tab-white {
  z-index: 888;
  position: relative;
  margin-bottom: 10px;
  padding-top: 15px;
  width: 750px;
  background: #F3F6FF;
  box-shadow: 0px 11px 24px 0px rgba(45, 139, 255, 0.2);
  border-radius: 56px;
  display: flex;
  justify-content: center;
  flex-direction: row;
}


.tab-left {
  // margin-left: 204px;
  // margin-right: 47px;
  width: 160px;
  font-size: 36px;
  font-weight: 500;
  line-height: 108px;
  position: relative;
  margin: 0px 11px;

  &>.tab-image {
    width: 0px;
    height: 0px;
  }
}

// .tab-image {
//   position: absolute;
//   top: 0px;
//   left: 0px;
//   width: 60px;
//   height: 9px;
// }

.activeCss {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 9px;
}

.activeLi {
  color: #357CFF;

  // &>.activeCss {
  //   width: 200px;
  //   height: 6px;
  //   background: #357CFF;
  //   border-radius: 3px;
  // }
  .tab-image {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 60px;
    height: 9px;
  }
}

.tab-right {
  width: 160px;
  font-size: 36px;
  font-weight: 500;
  line-height: 108px;
}



.accurate-wrapper {
  z-index: 77;
  margin-top: -80px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F3F6FF;
  padding: 116px 0px 0px 0px;
  overflow: hidden;
}

.accurate-title {
  margin-bottom: 40px;
  width: 249px;
  height: 58px;
  background: linear-gradient(0deg, #0071FF 0%, #318CFF 100%);
  border-radius: 25px;
  font-size: 30px;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 58px;
  text-align: center;
}

.accurate-image {
  margin-bottom: 369px;
  width: 725px;
  height: 346px;

}

.accurate-man {
  z-index: 55;
  position: absolute;
  top: 188px;
  left: 1px;
  width: 748px;
  height: 685px;
  transform: scale(0.8);
  -webkit-animation-name: scaleman;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 5s;
  /*动画所花费的时间*/
  overflow: hidden;
}

@keyframes scaleman {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(0.8);
    /*开始为原始大小*/
    opacity: 1;
  }

  25% {
    transform: scale(1);
    /*放大1.1倍*/
    opacity: 0.6;
  }

  50% {
    transform: scale(0.8);
    opacity: 1;
  }

  75% {
    transform: scale(1);
    opacity: 0.6;
  }
}

.accurate-list {
  z-index: 66;
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding: 0px 42px;
  overflow: hidden;
}

.accurate-list-num {
  width: 62px;
  height: 60px;
  margin-right: 27px;
}

.accurate-list-sub {
  margin-bottom: 90px;
  width: 565px;
  font-size: 26px;
  color: #888888;
  line-height: 42px;
}

.accurate-list2 {
  z-index: 99;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 35px 0px 0px 0px;
}

.accurate-url2 {
  margin-bottom: 57px;
  width: 750px;
  height: 542px;
}

.accurate-list-num2 {
  width: 71px;
  height: 60px;
  margin-right: 27px;
}

.accurate-view-item {
  margin-left: 32px;
  margin-right: 32px;
  display: inline-block;
  width: 1222px;
  height: 677px;
}

.accurate-list3 {
  z-index: 88;
  margin-top: -380px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F3F6FF;
  padding: 440px 0px 0px 0px;
}

.accurate-list-num3 {
  width: 73px;
  height: 60px;
  margin-right: 27px;
}

.accurate-title2 {
  width: 305px;
}

.accurate3-sub {
  width: 593px;
  text-align: center;
  margin-bottom: 31px;
}


.accurate-list-banner3 {
  margin-bottom: 83px;
  width: 750px;
  height: 480px;
}

.safe-wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  padding-top: 59px;
  overflow: hidden;
}

.safe-title {
  margin-left: auto;
  margin-right: auto;
  width: 347px;
  margin-bottom: 59px;
}

.safe-list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin-bottom: 60px;
}

.safe-list-back {
  // margin-left: 43px;
  width: 621px;
  height: 223px;
  background: #FFFFFF;
  border: 1px solid #2E8BFF;
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.32);
  border-radius: 25px;
  padding: 27px 0px 27px 26px;
}

.safeListTop {
  padding: 0px 10px 0px 21px;
}

.safeListbot {
  padding: 0px 21px 0px 10px;
}


.safe-list-txt {
  width: 519px;
  font-size: 26px;
  color: #666666;
  line-height: 48px;
}

.safe-list-img {
  margin-left: -69px;
  width: 138px;
  height: 122px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.safe-list-img-txt {
  width: 138px;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 34px;
  text-align: center;
}

.safe-list-img2 {
  margin-left: 43px;
  z-index: 55;
  margin-left: 0px;
}

.safe-list-back2 {
  z-index: 33;
  margin-left: -69px;
  padding: 27px 0px 27px 76px;
}

.safe-Down {
  margin-top: 133px;
  width: 100%;
  height: 576px;
  font-size: 0;
  background: url('https://oss.cloudcpc.com/42ea20fc50fa3424a0df765a492ab5ed.png') no-repeat;
  background-size: 100% 100%;
  position: 0px 576px;
}

.swiperBox {
  width: 100%;
  height: 100%;

  .swiper-slide {
    width: 100%;
    height: 443px;
    display: flex;
    justify-content: space-around;


    .itemDiv {
      width: 318px;
      height: 443px;
      overflow: visible;
      border-radius: 20px;
      box-sizing: border-box;
      box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.13);
      // background: linear-gradient(32deg, rgba(117, 174, 254, 0.38), rgba(88, 138, 252, 0.38));
      border: 2px solid rgba(46, 139, 255, 0.4);
      background-color: rgba(93, 128, 235, 0.13);

      .bgImg {
        width: 100%;
        height: 207px;
        border-radius: 20px 20px 0px 0px;
        // background-color: rgba(49, 143, 255, 0.39);
        position: relative;

        &>img {
          width: 100%;
          height: 100%;
        }

        .cirText {
          position: absolute;
          left: 50%;
          top: 50%;
          transform: translate(-50%, -50%);
          display: flex;
          justify-content: center;
          align-items: center;
          width: 122px;
          height: 122px;
          border: 1px solid #FFFFFF;
          border-radius: 50%;
          font-size: 28px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #FFFFFF;
        }
      }

      .content {
        width: 100%;
        height: 236px;
        border-radius: 0px 0px 20px 20px;
        font-size: 26px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #666666;
        box-sizing: border-box;
        padding: 23px 18px 0px 18px;
        line-height: 42px;
        overflow-y: auto;
      }
    }
  }
}

.safe-Top-swiper {
  position: absolute;
  top: 770px;
  left: 32px;
  width: 686px;
  height: 550px;
}

.safe-Top-swiper-item {
  width: 686px;
  display: flex;
  flex-direction: row;
  justify-content: space-around;

}

.safe-Top-white {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 318px;
  height: 480px;
  background: #FFFFFF;
  border: 1px solid #2E8BFF;
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.4);
  border-radius: 20px;
}

.safe-Top-white-url {
  margin-bottom: 23px;
  width: 318px;
  height: 207px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.safe-Top-white-txt {
  width: 122px;
  height: 122px;
  border: 1px solid #FFFFFF;
  border-radius: 50%;
  font-size: 28px;
  color: #FFFFFF;
  line-height: 122px;
  text-align: center;
}

.safe-Top-white-sub {
  width: 285px;
  font-size: 26px;
  color: #666666;
  line-height: 42px;
}

.money-wrapper {
  z-index: 55;
  margin-top: -80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F3F6FF;
  padding: 142px 0px 0px 0px;
}

.money-title {
  margin-bottom: 32px;
  width: 315px;
}

.money-view-item {
  margin-bottom: 56px;
  width: 688px;
  height: 565px;
}

.money-sub {
  width: 643px;
  margin-bottom: 89px;
  font-size: 28px;
  color: #888888;
  line-height: 48px;
  text-align: center;
}

.lowcost-wrapper {
  z-index: 55;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #FFFFFF;
  padding: 69px 0px 0px 0px;
}

.lowcost-title {
  margin-bottom: 0px;
  width: 339px;
}

.lowcost-view-item {
  width: 749px;
  height: 544px;
}

.lowcost-sub {
  margin-top: -30px;
  margin-bottom: 93px;
}

.more-wrapper {
  z-index: 66;
  position: relative;
  width: 750px;
  background: url('https://oss.cloudcpc.com/4ffae3fdb144339798d4c1779eb6c1b7.png') no-repeat center;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  // margin-top: 24px;
}

.lowcost2-title {
  z-index: 77;
  /* margin-top: -16px; */
  margin-bottom: 78px;
  width: 360px;
}

.more-image {
  position: absolute;
  top: 106px;
  left: 0px;
  width: 521px;
  height: 462px;
  transform: scale(1);
  -webkit-animation-name: scaleMore;
  /*关键帧名称*/
  -webkit-animation-timing-function: ease-in-out;
  /*动画的速度曲线*/
  -webkit-animation-iteration-count: infinite;
  /*动画播放的次数*/
  -webkit-animation-duration: 5s;
  /*动画所花费的时间*/
}

@keyframes scaleMore {

  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
  0% {
    transform: scale(1);
    /*开始为原始大小*/
    opacity: 1;
  }

  25% {
    transform: scale(1.2);
    /*放大1.1倍*/
    opacity: 0.6;
  }

  50% {
    transform: scale(1);
    opacity: 1;
  }

  75% {
    transform: scale(1.2);
    opacity: 0.6;
  }
}

// .moreBox {
//   margin-top: -60px;
//   border: 1px solid red;
// }

.more-list {
  margin-left: 200px;
  display: flex;
  flex-direction: row;
  margin-bottom: 40px;
}

.more-url {
  z-index: 55;
  width: 41px;
  height: 41px;
}

.more-list-sub {
  z-index: 58;
  margin-left: -25px;
  margin-top: 15px;
  width: 400px;
  font-size: 24px;
  color: #5E92FD;
  line-height: 24px;
}

.more-sub {
  width: 655px;
  margin-top: 51px;
  margin-bottom: 135px;
}

.pattern-wrapper {
  z-index: 888;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #F3F6FF;
  overflow: hidden;
}

.pattern-wrapper-line {
  width: 750px;
  height: 29px;
  background-color: #FFFFFF;
}

.pattern-title {
  margin-top: -29px;
  margin-bottom: 71px;
}

.pattern-list-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.pattern-list {
  // margin-left: -1600px;
  margin-bottom: 68px;
  width: 692px;
  background: #FFFFFF;
  border-width: 1px solid;
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.13);
  border-radius: 25px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}



.pattern-list2 {
  // margin-left: 1600px;
}

.pattern-list3 {
  // margin-left: -1600px;
}

.pattern-list-left {
  margin-left: 40px;
  width: 525px;
  font-size: 26px;
  color: #666666;
  line-height: 48px;
  font-family: Source Han Sans CN;
  font-weight: 400;
}

.pattern-list-right {
  width: 88px;
  height: 332px;
  background: linear-gradient(90deg, #75AEFE 0%, #FFFFFF 0%, #FFFFFF 0%, #95C3FF 100%);
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.36);
  opacity: 0.32;
  border-radius: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.pattern-list-right-title {
  text-align: center;
  // width: 88px;
  font-size: 50px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  color: #197EFF;
  line-height: 60px;
  // opacity: 0.43;
}

.pattern-list-right2 {
  background: linear-gradient(-89deg, #75AEFE 0%, #FFFFFF 0%, #FFFFFF 0%, #95FFFE 100%);

}

.pattern-list-right2-title {
  color: #00B9B9;
}

.pattern-list-left2 {
  margin-right: 67px;
  width: 493px;
  font-size: 26px;
  color: #666666;
  line-height: 48px;
}

.pattern-list-left3 {
  margin-left: 35px;
  width: 550px;
}

.pattern-list-right3 {
  background: linear-gradient(90deg, #75AEFE 0%, #FFFFFF 0%, #FFFFFF 0%, #A695FF 100%);
}

.pattern-list-right3-title {
  color: #2419FF;
}

.pattern-down-image {
  position: absolute;
  top: 1215px;
  left: 0px;
  width: 750px;
  height: 637px;
  font-size: 0;
}

.pattern-list-down {
  display: flex;
  flex-direction: row;
  margin-bottom: 117px;
}

.pattern-down-white {
  margin-left: 28px;
  margin-right: 28px;
  width: 332px;
  height: 407px;
  background: #FFFFFF;
  border-width: 1px solid;
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.13);
  opacity: 0.6;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pattern-down-white2 {
  margin-left: 0px;
}

.pattern-down-white-text {
  width: 332px;
  height: 88px;
  background: linear-gradient(0deg, #75AEFE 0%, #FFFFFF 0%, #FFFFFF 0%, #FEDE6E 100%);
  box-shadow: 0px 0px 32px 0px rgba(93, 128, 235, 0.36);
  opacity: 0.47;
  border-radius: 20px;
  font-size: 50px;
  font-weight: bold;
  color: #DDB600;
  line-height: 88px;
  opacity: 0.43;
  margin-bottom: 42px;
  text-align: center;
}

.pattern-down-white-sub {
  margin-bottom: 30px;
  width: 295px;
  font-size: 26px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  color: #666666;
  line-height: 48px;
  text-align: center;
}

.pattern-down-white-text2 {
  background: linear-gradient(0deg, #75AEFE 0%, #FFFFFF 0%, #FFFFFF 0%, #FF9C95 100%);
  color: #DE4B42;
}
